<script setup>
import request9191 from "../../utils/request9191.js";
import {reactive, ref} from "vue";

const clubCount = ref(0)
const clubActivityCount = ref(0)
const clubActivityToPassCount = ref(0)
const getClubCount = () => {
  request9191({
    url: '/club/getClubTotal',
    method: 'get',
  }).then((res) => {
    clubCount.value = res.data.data
  })
}
getClubCount()
const getClubActivityCount = () => {
  request9191({
    url: '/clubActivity/getClubActivityTotal',
    method: 'get',
  }).then((res) => {
    clubActivityCount.value = res.data.data
  })
}
getClubActivityCount()
const getClubActivityToPassCount = () => {
  request9191({
    url: '/clubJoin/getStatus',
    method: 'get',
  }).then((res) => {
    clubActivityToPassCount.value = res.data.data
  })
}
getClubActivityToPassCount()
const config = reactive({
  data: [86],
  shape: 'round',
})
</script>

<template>
  <div class="clubCount">
    <div class="clubCount_main">
      <span>社团总数:   <i>{{ clubCount }}</i></span><br>
      <span>社团活动数:   <i>{{ clubActivityCount }}</i></span><br>
      <span>社团申请待审核数量:   <i style="color: red">{{ clubActivityToPassCount }}</i></span>
    </div>
    <div class="bfs">
      <dv-water-level-pond :config="config" style="width:100px;height:100px;margin-top: 40px;"/>
      <span>学生参团率</span>
    </div>
  </div>
</template>

<style scoped>
.clubCount {
  margin-left: 50px;
  color: yellow;
  width: 450px;
  height: 200px;
  display: flex;
  justify-content: space-between;
}
.clubCount_main i {
  font-size: 25px;
  color: #13ce66;
  font-weight: bolder;
}
.clubCount_main {
  line-height: 50px;
  padding-top: 20px;
}
</style>
